<template>
  <div class="me">
    <div class="user-info">
      <div class="user-img">
        <img :src="imgUrl" alt="">
      </div>
      <div class="name">
        <p>Admin</p>
      </div>
    </div>
    <div class="order-state">
      <div class="item">
        <van-icon name="gold-coin-o" />
        <p>待付款</p>
      </div>
      <div class="item">
        <van-icon name="send-gift-o" />
        <p>待发货</p>
      </div>
      <div class="item">
        <van-badge :content="2">
          <van-icon name="logistics" />
        </van-badge>
        <p>待收货</p>
      </div>
      <div class="item">
        <van-icon name="smile-comment-o" />
        <p>待评价</p>
      </div>
      <div class="item">
        <van-badge :content="1">
          <van-icon name="refund-o" />
        </van-badge>
        <p>退款/售后</p>
      </div>
    </div>
    <div class="nav">
      <van-cell title="个人信息" is-link  to="/profile"/>
      <van-cell title="地址管理" is-link  to="/address"/>
    </div>
    <div class="order">
      <p class="myOrder">我的订单</p>
      <div class="item-order" v-for="(item,index) in orderList" :v-key="index">
        <div class="img">
          <img :src="item.url" alt="">
        </div>
        <div class="state">
          <p>{{item.state}}</p>
          <p>{{item.statecontent}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Me",
  data(){
    return{
      imgUrl: require("@/assets/img/lamb.jpg"),
      orderList:[
        {
          name:"龙蛋",
          url:"http://www.zishayy.com/UserFiles/shopsimg2/12543.jpg",
          detailList:[
            "http://www.zishayy.com/UserFiles/shopsimg/125431.jpg",
            "http://www.zishayy.com/UserFiles/shopsimg/125432.jpg",
            "http://www.zishayy.com/UserFiles/shopsimg/125433.jpg",
            "http://www.zishayy.com/UserFiles/shopsimg/125434.jpg",
          ],
          price: 99,
          state: "运输中",
          statecontent: "【北京市】快件已从北京快递公司发出……"
        },
        {
          name:"香梅三式",
          url:"http://www.zishayy.com/UserFiles/shopsimg2/12538.jpg",
          detailList:[
            "http://www.zishayy.com/UserFiles/shopsimg/125382.jpg",
            "http://www.zishayy.com/UserFiles/shopsimg/125383.jpg",
            "http://www.zishayy.com/UserFiles/shopsimg/125384.jpg",
            "http://www.zishayy.com/UserFiles/shopsimg/125385.jpg",
          ],
          price: 199,
          state: "派送中",
          statecontent: "【北京市】北京快递公司派件员……"
        }
      ],

    }
  }
}
</script>

<style scoped lang="less">
.me{
  //padding: 10px 10px 0 10px;
  padding: 10px;
  min-height: calc(100vh - 70px);
  .user-info::before{
    filter: blur(20px);
  }
  .user-info{
    display: flex;
    background: hsla(0,0%,100%,.25) border-box;
    //filter: blur(20px);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    .user-img{
      width: 100px;
      height: 100px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .name{
      line-height: 100px;
      font-size: 1.5rem;
      padding: 0 10px;
      font-weight: bolder;
      button{
        font-size: 1rem;
      }
    }
  }
}
//订单状态
.order-state{
  padding: 10px;
  background: white;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  .item{
    text-align: center;
    .van-icon{
      font-size: 2rem;
      font-weight: bolder;
    }
  }
}
//订单
.order{
  background-color: white;
  padding: 10px;
  .myOrder{
    padding-bottom: 5px;
    border-bottom: 1px solid #CDCDCD;
  }
}
.item-order{
  display: flex;
  padding: 10px;
  .img{
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  p{
    margin-left: 5px;
    width: 200px;
  }
}
</style>
